<div ng-if="!$ctrl.canDrag">
    <span class="text-warning" ng-bind="$ctrl.translate('warning_can_not_drag_drop',true, '(**Drag Drop only allow when order by priority asc)')"></span>
</div>
<div class="data-table" ng-if="$ctrl.data.items" ng-init="$ctrl.init()">
    <div class="nav">
        <div class="col-sm-12 p-2">
            <div class="row header">
                <div class="col-1">
                    <span class="fas fa-sort"></span>
                </div>
                <div scope="col" class="col-sm-1">
                    <span class="fas fa-sort-numeric-down"></span>
                </div>
                <div scope="col" class="col-sm-{{$ctrl.colWidth}}" ng-repeat="col in $ctrl.columns track by $index">
                    <span ng-bind="col.title">
                    </span>
                </div>
                <div scope="col" class="col-sm-{{$ctrl.lastColWidth}}">
                    Actions
                </div>
            </div>
        </div>
    </div>
    <div dnd-list="$ctrl.data.items" id="list-page" class="nav" ng-if="$ctrl.data.items.length" dnd-inserted="$ctrl.insertCallback(index, item, external, type)" dnd-disable-if="!$ctrl.canDrag">
        <div class="col-sm-12 dndPlaceholder"></div>
        <div ng-repeat="nav in $ctrl.data.items" class="col-sm-12 dnd-item" dnd-draggable="nav" dnd-moved="$ctrl.updateOrders($index,$ctrl.data.items)" dnd-effect-allowed="move" dnd-selected="$ctrl.selected = nav" ng-class="{'selected': $ctrl.selected === nav}">
            <div class="row">
                <div class="col-1 drag-header" style="cursor:move;">
                    <span class="fas fa-sort"></span>
                </div>
                <div class="col-sm-1">
                    <input style="width:40px" type="number" readonly="readonly" ng-model="nav.priority" class="item-priority form-control form-control-sm d-inline">
                </div>
                <div class="col-sm-{{$ctrl.colWidth}}" ng-repeat="col in $ctrl.columns track by $index">
                    <sio-data-preview type="col.type" value="nav[col.name]" width="50"></sio-data-preview>
                </div>
                <div class="col-sm-{{$ctrl.lastColWidth}}">
                    <div class="btn-group btn-group-sm float-right" role="group" aria-label="Actions">
                        <a ng-if="nav.childNavs.length > 0" class="btn btn-light" ng-click="$ctrl.toggleChildNavs(nav)">
                            <span class="fa fa-list text-primary"></span>
                        </a>
                        <a ng-if="$ctrl.editUrl" ng-click="$ctrl.goTo(nav.id)" class="btn btn-sm btn-light">
                            <span class="fas fa-pencil-alt text-primary"></span>
                        </a>
                        <a ng-click="$ctrl.delete(nav.id);" class="btn btn-light del-popover" data-toggle="popover" data-html="true">
                            <span class="fas fa-times text-danger"></span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- Childs -->
            <div ng-show="nav.showChildNavs" dnd-list="nav.childNavs" class="nav" dnd-disable-if="!$ctrl.canDrag">
                <div class="col-sm-12 dndPlaceholder"></div>
                <div ng-repeat="snav in nav.childNavs" class="col-sm-12 dnd-item" dnd-draggable="snav" dnd-moved="$ctrl.updateChildOrders($index,nav.childNavs)" dnd-effect-allowed="move" dnd-selected="$ctrl.selected = snav">
                    <div class="row">
                        <div class="col-1 drag-header" style="cursor:move;">
                            <span class="fas fa-sort"></span>
                        </div>
                        <div class="col-sm-1">
                            <input type="number" readonly="readonly" ng-model="snav.priority" class="item-priority form-control form-control-sm d-inline">
                        </div>
                        <div class="col-sm-{{$ctrl.colWidth}}" ng-repeat="col in $ctrl.columns">
                            <sio-data-preview type="col.type" value="snav.page[col.name]" width="50"></sio-data-preview>
                        </div>
                        <div class="col-sm-{{$ctrl.lastColWidth}}">
                            <div class="btn-group btn-group-sm float-right" role="group" aria-label="Actions">
                                <a ng-if="$ctrl.editUrl" ng-click="$ctrl.goTo(snav.id)" class="btn btn-sm btn-light">
                                    <span class="fas fa-pencil-alt text-primary"></span>
                                </a>
                                <a ng-click="$ctrl.delete(snav.id);" class="btn btn-light del-popover" data-toggle="popover" data-html="true">
                                    <span class="fas fa-times text-danger"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Childs -->
        </div>
    </div>
</div>
